import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Modal, Select, DatePicker } from 'antd'
import { converDate, SelectProps } from 'utils'
import moment from 'moment'

const FormItem = Form.Item
const Option = Select.Option
const { TextArea } = Input

const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  optionData,
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        id: item.id || 1,
      }
      // data.address = data.address.join(' ')
      onOk(data)
    })
  }
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  const identifierTypeOption = optionData.identifierTypeData.map(d => <Option key={d.code}>{d.name}</Option>)
  const countryTypeOption = optionData.countryCodeData.map(d => <Option key={d.code}>{d.name}</Option>)
  const dateFormat = 'DD/MM/YYYY'
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <FormItem label="Type" hasFeedback {...formItemLayout}>
          {getFieldDecorator('type', {
            initialValue: item.type,
            rules: [
              {
                required: true,
              },
            ],
          })(<Select style={{ width: '100%' }}>{identifierTypeOption}</Select>)}
        </FormItem>
        <FormItem label="Number" hasFeedback {...formItemLayout}>
          {getFieldDecorator('number', {
            initialValue: item.number,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="IssueDate" hasFeedback {...formItemLayout}>
          {getFieldDecorator('issueDate', {
            initialValue: item.issueDate ? moment(converDate(item.issueDate), dateFormat) : '',
          })(<DatePicker style={{ width: '100%' }} format={dateFormat} />)}
        </FormItem>
        <FormItem label="ExpireDate" hasFeedback {...formItemLayout}>
          {getFieldDecorator('expireDate', {
            initialValue: item.expireDate ? moment(converDate(item.expireDate), dateFormat) : '',
          })(<DatePicker style={{ width: '100%' }} format={dateFormat} />)}
        </FormItem>
        <FormItem label="IssuedBy" hasFeedback {...formItemLayout}>
          {getFieldDecorator('issueBy', {
            initialValue: item.issuedBy,
          })(<Input />)}
        </FormItem>
        <FormItem label="IssueCountry" hasFeedback {...formItemLayout}>
          {getFieldDecorator('issueCountry', {
            initialValue: item.issueCountry,
            rules: [
              {
                required: true,
              },
            ],
          })(<Select style={{ width: '100%' }} {...SelectProps}>{countryTypeOption}</Select>)}
        </FormItem>
        <FormItem label="Comments" hasFeedback {...formItemLayout}>
          {getFieldDecorator('comments', {
            initialValue: item.comments,
          })(<TextArea rows={4} />)}
        </FormItem>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
  optionData: PropTypes.object,
}

export default Form.create()(modal)
